<template>
	<view>
		<navbar top="80rpx"></navbar>
		<view class="header">
			<view class="header-container">
				<view class="tab-list dis-flex">
					<view v-for="(item,index) in tab.list" :key="item.flag_dc"
						:class="'tab' + (item.flag_dc == tab.current ? ' active' : '')"
						@tap.stop.prevent="toggleTab(item.flag_dc)">
						{{ item.title }}
					</view>
				</view>
			</view>
			<view class="header-placeholder"></view>
		</view>
		<view v-if="0 < record.list.length" class="record-list">
			<view v-for="item in record.list" :key="item.log_id" class="record">
				<view class="dis-flex flex-x-between flex-y-center f-28">
					<view>{{ TXN_TYPE[item.txn_type] }}</view>
					<view class="f-bold">{{ item.amt }}</view>
				</view>
				<view class="m-top20 dis-flex flex-x-between flex-y-center f-22">
					<view class="col-9">{{ utils.formatDate(item.txn_time) }}</view>
					<view class="col-9">待结算金额：{{ item.amt_bal }}</view>
				</view>
			</view>
		</view>
		<!-- 没有记录 -->
		<view v-if="0 == record.list.length && !record.loading" class="yoshop-notcont">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">暂无相关明细哦</text>
		</view>
	</view>
</template>

<script module="utils" lang="wxs">
	var formatDate = function(date) {
		try {
			var year = date.substring(0, 4);
			var month = date.substring(4, 6);
			var day = date.substring(6, 8);
			var hour = date.substring(8, 10);
			var minute = date.substring(10, 12);
			var seconds = date.substring(12, 14);
			return `${year}-${month}-${day} ${hour}:${minute}:${seconds}`;
		} catch (e) {
			//TODO handle the exception
			return date;
		}
	}
	module.exports = {
		formatDate
	}
</script>
<script>
	const app = getApp();
	const TYPE_DIC = {
		USEROWN_AVAILABLE: '可用账户明细',
		USEROWN_PSETTLE: '待结算账户明细'
	};
	export default {
		data() {
			return {
				type: '', // USEROWN_PSETTLE 可用账户，USEROWN_PSETTLE待结算账户
				tab: {
					list: [{
						title: '全部',
						flag_dc: ''
					}, {
						title: '出账',
						flag_dc: 'DEBIT'
					}, {
						title: '入账',
						flag_dc: 'CREDIT'
					}],
					current: ''
				},
				TXN_TYPE: {
					'USER_TOPUP': '用户充值',
					'MCH_TOPUP': '商户充值',
					'GENERAL_CONSUME': '普通消费',
					'SECURED_CONSUME': '担保消费',
					'SERVICE_FEE': '手续费收取',
					'INNER_FUND_EXCHANGE': '内部代发',
					'OUTER_FUND_EXCHANGE': '外部代发',
					'ACCT_CASH_OUT': '账户提现',
					'SECURED_CONFIRM': '担保确认',
					'CAPITAL_CANCEL': '手续费应收应付核销',
					'INNER_DIRECT_EXCHANGE': '定向内部代发',
				},
				record: {
					page: 1,
					pageSize: 20,
					loading: true,
					hasMore: false,
					list: []
				},
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.requestData();
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: TYPE_DIC[this.type]
			});
		},
		onPullDownRefresh() {
			this.record.page = 1;
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			if (this.record.hasMore && !this.record.loading) {
				this.requestData();
			}
		},
		methods: {
			toggleTab(flag_dc) {
				if (flag_dc != this.tab.current) {
					this.tab.current = flag_dc;
					this.record.page = 1;
					this.requestData();
				}
			},
			requestData(complete) {
				this.record.loading = true;
				uni.showLoading();
				app._get('user.wallet/balance_log', {
					type: this.type,
					page_no: this.record.page,
					page_size: this.record.pageSize,
					flag_dc: this.tab.current
				}, (res) => {
					if ('0000' === res.ret_code) {
						// 交易成功
						let {
							acctbal_list,
							total_num
						} = res;

						let {
							page,
							list,
							hasMore
						} = this.record;
						if (1 == page) {
							list.length = 0;
						}
						list = [...list, ...acctbal_list];
						hasMore = total_num > list.length;
						if (hasMore) {
							page++;
						}
						this.record.page = page;
						this.record.list = list;
						this.record.hasMore = hasMore;
					} else {
						app.showError(res.ret_msg);
					}
				}, null, () => {
					this.record.loading = false;
					uni.hideLoading();
					complete && complete();
				})
			},
		}
	}
</script>
<style lang="scss">
	page,
	body {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.header .header-container {
		width: 100%;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.header .header-placeholder {
		height: 80rpx;
	}

	.header .tab-list {
		width: 100%;
		background: #fff;
		padding-left: 10rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.header .tab {
		height: 80rpx;
		padding: 0 30rpx;
		line-height: 80rpx;
		position: relative;
		font-size: 28rpx;
		color: #666;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	.header .tab.active {
		font-size: 30rpx;
		font-weight: bold;
		color: $uni-text-color;
	}

	.header .tab.active:after {
		content: "";
		width: 56rpx;
		height: 4rpx;
		background: $uni-bg-color;
		border-radius: 2rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.record-list {
		padding: 0 20rpx;
	}

	.record {
		padding: 40rpx 20rpx;
	}

	.record:nth-child(n+2) {
		border-top: 1px solid #f9f9f9;
	}
</style>
